<!--
 * @Description: 
 * @Author: xiao li
 * @Date: 2021-07-04 00:16:14
 * @LastEditTime: 2023-08-03 11:26:37
 * @LastEditors: DXV-RGWU-TUFH-RFCY-IEGMYY
-->
<template>
  <div class="more-item radius-15" v-if="isLook">
    <el-image :fit="fit" :src="src">
      <div slot="error" class="image-slot">
        <i class="el-icon-picture-outline c-paragraph"></i>
      </div>
    </el-image>
    <div @click="lookBigImg" class="mask" v-if="isLook">
      <i class="el-icon-zoom-in"></i>
    </div>
    <el-dialog
      :title="title"
      :visible.sync="showDialog"
      :width="width"
      center
      :append-to-body="true"
    >
      <div class="dialog-inner-img">
        <lb-image class="dialog-img" :src="src" />
      </div>
    </el-dialog>
  </div>
  <el-image :class="[{ 'bg-img': !src }]" :fit="fit" :src="src" v-else>
    <div slot="error" class="image-slot">
      <i class="el-icon-picture-outline"></i>
    </div>
  </el-image>
</template>

<script>
export default {
  props: {
    fit: {
      type: String,
      default () {
        return 'cover'
      }
    },
    src: {
      type: String,
      default () {
        return ''
      }
    },
    isLook: {
      type: Boolean,
      default () {
        return false
      }
    },
    title: {
      type: String,
      default () {
        return ''
      }
    },
    width: {
      type: String,
      default () {
        return '800px'
      }
    }
  },
  data () {
    return {
      showDialog: false
    }
  },
  methods: {
    lookBigImg () {
      if (!this.isLook) return
      this.showDialog = true
    }
  }
}
</script>

<style lang="scss" scoped>
.el-image {
  display: flex;
  justify-content: center;
  align-items: center;
  .image-slot {
    i {
      font-size: 20px;
    }
  }
}
.bg-img {
  background: $bgThemeColor;
}
.more-item {
  position: relative;
  overflow: hidden;
  .mask {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    font-size: 20px;
    color: #fff;
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 10;
    top: 0;
    left: 0;
    i {
      margin: 0 10px;
      cursor: pointer;
    }
  }
  &:hover {
    .mask {
      display: flex;
    }
  }
}
.dialog-inner-img {
  display: flex;
  justify-content: center;
  align-items: center;
  .dialog-img {
    width: 100%;
  }
}
</style>
